<template>
  <div class="person">
    <h2>一辆{{ car.brand }}车，价值{{ car.price }}万</h2>
    <button @click="changePrice">修改价格</button>
    <br>
    <ul>
      <li v-for="item in games" :key="item.id">{{ item.name }}</li>  
      <!-- key是数组中当前元素的唯一标识符，前面加：是将后面的作为模板字符串解析，而非简单的字符串 -->
    </ul>
    <button @click="changeGame">修改游戏名字</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { ref,reactive} from 'vue';
  // 数据
  let car = ref({brand:'小米u7',price:100})  //ref也可以定义对象,因为底层是利用了reactive,在car.value中存放的是一个proxy代理的响应式对象
  let games = ref([
    {id:'12345',name:'王者荣耀'},
    {id:'45678',name:'原神'},
  ])
  // let name = reactive('zhang-san')   reactive不能定义基本数据类型的响应式数据
  // 方法
  function changePrice(){
    car.value.price += 10
  }
  function changeGame(){
    games.value[0].name = '蛋仔派对'
  }
</script>

<style>
  .person{
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }
  button{
    margin: 0 5px;
  }
  ul li{
    font-size: 20px;
  }
</style>